<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示与隐藏</title>
    <script src="jQuery/jquery-1.11.3.js"></script>
</head>
<body>
         <script>
             $(function () {
                 $('input').click(function () {
                     $('img').animate({                         //animate有生命的
                         'margin-left':'100px',
                         'opacity':0.3                           //opacity不透明的
                     },'slow','linear',function () {           //slow慢的，减速的       //linear线的，线行的
                         $('img').animate({
                             'margin-left':'200px',
                             'opacity':1
                         },'slow',function () {
                             $('img').animate({
                                 'margin-top':'300px'
                             },
                             5000
                             )
                             }
                         )
                         }
                     )
                 })
             })
         </script>
        <input type="button" value="点我">
        <img src="image/1.jpg" width="760">
</body>
</html>